<template>
	<view style="width: 100%;height: auto;min-height:100vh;background: #fff;">
		<view style="width: 100%;height: 20rpx;background: #fff;"></view>
		<view>
			<view @click="toCampDetail(list)"
				style="display: flex;background: rgb(255, 245, 231);margin:0 20rpx 20rpx 20rpx;width: calc(100% - 40rpx);border-radius: 10rpx;"
				v-for="(list,index) in camplist" :key="list.id">
				<image :src="list.img" style="width: 200rpx;height: 200rpx;margin: 20rpx;">
				</image>
				<view style="margin: 0rpx 0 0 0rpx;">
					<view style="font-size: 32rpx;font-weight: 600;margin-top: 30rpx;">
						{{list.name}}
					</view>
					<view style="color: #6D6D6D;font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						期数：{{list.qishu}}
					</view>
					<view style="color: #6D6D6D;font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						学习周期：{{list.date}}
					</view>
					<view style="color: rgb(251, 0, 29);font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						￥{{list.price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();

	import {
		getBootcampList
	} from '@/api/camp.js';
	import {
		addClickRecord,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		ref
	} from 'process';

	export default {
		components: {

		},
		data() {
			return {
				camplist: [],
				userId: '',
				token: '',
				phone: '',
				learn: 0,
				platform: uni.getSystemInfoSync().platform, //手机类型
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;

		},
		onPageScroll(res) { //、、、、、
			let that = this;
		},
		onReachBottom() {
			let that = this;
		},
		onLoad() {
			let that = this;

			let locatiojUrl = window.location.href;

			//let locatiojUrl =
			//	'http://10.10.8.15:8080/qz/?phone=13012562102&token=1202bdc5effd1ecbbd447deec7a6f78b&userId=337538';

			that.userId = decodeURI(that.jqueryUrl(locatiojUrl).userId);
			that.token = decodeURI(that.jqueryUrl(locatiojUrl).token);
			that.phone = decodeURI(that.jqueryUrl(locatiojUrl).phone);
			that.loginH5();
			that.getList();
			that.addClickRecordAll();
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			toCampDetail(list) {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/workshop/detail?bootId=' + list.id + '&userId=' + that.userId +
						'&token=' + that.token
				})
			},
			getList() {
				let that = this;
				if (that.userId == '') {
					return;
				}
				let pp = {};
				pp.userId = that.userId;
				getBootcampList(pp).then(res => {
					if (res.code == 0) {
						that.camplist = [];
						that.camplist = res.data.list;
					}
				})
			},
			addClickRecordAll() {
				let that = this;
				if (that.userId == '') {
					return;
				}
				let pp = {};
				pp.userId = that.userId;
				pp.token = that.token;
				pp.platform = that.platform == 'ios' ? '苹果' : '安卓';
				pp.type = '体验营1';
				addClickRecord(pp).then(res => {

				})
			},
			loginH5() {
				let that = this;
				loginMobile({
						phone: that.phone,
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);

					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.call {
		position: fixed;
		bottom: 60rpx;
		left: 40rpx;
		background-color: #ea5550;
		font-size: 30rpx;
		width: calc(100% - 80rpx);
		height: 80rpx;
		line-height: 80rpx;
	}

	.header {
		width: 100%;
		height: 200px;
	}

	.sticky-box {
		position: sticky;
		top: 0;
		/* 设定吸顶时的位置 */
		z-index: 999;
		/* 确保元素在顶层 */
		background-color: #fff;
		/* 建议设置背景，防止遮挡下方内容 */
	}

	.des_detail {
		/* 必须设置position: relative;不然会位置飘出父层 */
		position: relative;
		z-index: 1001;
		margin-top: -200px;
		width: 100%;
		height: 100vh;
		//background: rgb(95, 157, 228);
		background: transparent;
	}
</style>